<!--
 * @Author: your name
 * @Date: 2020-11-27 22:40:21
 * @LastEditTime: 2020-11-28 10:07:34
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \jet_mes\src\components\MessageItem.vue
-->
<template>
  <q-item clickable v-ripple @click="message.module ? $router.push(message.module) : '/main/index/'">
    <q-item-section avatar style="min-width: 0">
      <q-icon name="message" :color="message.is_new ? 'teal' : ''" />
    </q-item-section>

    <q-item-section>
      <q-item-label class="flex" caption>{{message.from_user}}<q-space />{{time}}</q-item-label>
      <q-item-label>{{message.title}}:{{message.message}}</q-item-label>
    </q-item-section>
  </q-item>
</template>

<script>
import { defineComponent } from 'vue';
import { date } from 'quasar';
export default defineComponent({
  props: {
    message: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    time () {
      let timeLabel = '';
      const diff = Date.now() / 1000 - this.message.create_time;
      const today = date.formatDate(Date.now(), 'YYYYMMDD');
      const days = date.getDateDiff(Date.now(), this.message.create_time * 1000);

      if (diff < 10 * 60) { // 10分钟内
        timeLabel = `${~~(diff / 60) + 1}分钟前`;
      } else if (today == date.formatDate(this.message.create_time * 1000, 'YYYYMMDD')) { // 今天
        timeLabel = date.formatDate(this.message.create_time * 1000, 'HH:mm');
      } else if (days == 1) {
        timeLabel = '昨天 ' + date.formatDate(this.message.create_time * 1000, 'HH:mm');
      } else if (days == 2) {
        timeLabel = '前天 ' + date.formatDate(this.message.create_time * 1000, 'HH:mm');
      } else {
        timeLabel = this.message.createtime;
      }
      return timeLabel;
    }
  }
});
</script>
